<template>
  <div>


  <el-row  :gutter="10">
    <el-col :span="4">
      <el-upload
          ref="upload"
          action="https://jsonplaceholder.typicode.com/posts/"
          class="upload-demo"
          accept="xls,xlsx"
          :show-file-list="false"
          :auto-upload="false"
          :multiple="false"
          :on-change="fileOnChange">
        <el-button slot="trigger" size="small" type="primary"  icon="el-icon-plus">处方导入</el-button>

      </el-upload>
    </el-col>
    <el-col :span="2"  style="margin-top: 7px "><div class="medicineLabel" >药物数：</div></el-col>

    <el-col :span="3">

        <el-select  v-model="medcineValue" placeholder="请输入药对数" style="width: 130px">
          <el-option
              v-for="item in medicineOptions"
              :key="item.medcineValue"
              :label="item.medcineLabel"
              :value="item.medcineValue">
          </el-option>
        </el-select>
    </el-col>
    <el-col :span="4" style="margin-top: 7px;margin-left:40px;padding-left: 30px;">
      <div class="sortLabel">
        <span>排序药物个数：</span>
      </div>
    </el-col>
    <el-col :span="4"><div class="grid-content bg-purple-light">  <el-select v-model="sortValue" placeholder="降序N个排序显示">
      <el-option
          v-for="item in sortOptions"
          :key="item.sortValue"
          :label="item.sortLabel"
          :value="item.sortValue">
      </el-option>
    </el-select></div></el-col>

    <el-col :span="6" style=";padding-left: 40px" ><el-button type="primary" @click="sendJsonData_to_backend">确定</el-button> <el-button type="primary" style="margin-left: 20px" @click="downloadFreq">下载</el-button></el-col>
  </el-row>
  <div class="fengexian"></div>
  </div>
</template>

<script>
import Import from "../Tools/Import";
var XLSX = require("xlsx");
export default {
  name: "FreInput",
    components: {Import},
  data(){
    return{
      medicineOptions: [{
        medcineValue: '1',
        medcineLabel: '单味药'
      }, {
        medcineValue: '2',
        medcineLabel: '药对'
      }, {
        medcineValue: '3',
        medcineLabel: '三元组'
      }],
      medcineValue: [],
//--------------------------------------------------------------------------------------------------
      sortOptions:[
        {
          sortValue:'1',
          sortLabel:'1'
        },
        {
          sortValue:'2',
          sortLabel:'2'
        },
        {
          sortValue:'3',
          sortLabel:'3'
        },
        {
          sortValue:'4',
          sortLabel:'4'
        },
        {
          sortValue:'5',
          sortLabel:'5'
        },
        {
          sortValue:'6',
          sortLabel:'6'
        },
        {
          sortValue:'7',
          sortLabel:'7'
        },
        {
          sortValue:'8',
          sortLabel:'8'
        },
        {
          sortValue:'9',
          sortLabel:'9'
        },
        {
          sortValue:'10',
          sortLabel:'10'
        },
      ],
      sortValue:[],
      excel_json:"",
      fre_data_form:{
        med_num:this.med_num,//单味药，药对，三味药
        sort_num:this.sort_num,
        json:'',
      }
    }
    },
  methods:{

    fileOnChange(file, fileList){
      let files = {0:file.raw}
      this.readExcel1(files);
    },
    readExcel1(files) {//表格导入
      var that = this;
      if(files.length<=0){//如果没有文件名
        return false;
      }else if(!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())){

        this.$message.error('上传格式不正确，请上传xls或者xlsx格式');
        return false;
      }
      const fileReader = new FileReader();
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result;
          const workbook = XLSX.read(data, {
            type: 'binary'
          });

          const wsname1 = workbook.SheetNames[0];//取第一张表
          console.log(wsname1)
          const ws1 = XLSX.utils.sheet_to_json(workbook.Sheets[wsname1]);//生成第一张表的json表格内容
          console.log(ws1.length)
          var medicineArray = new Array();
          for(var i=0;i<ws1.length;i++){
            medicineArray.push(ws1[i].处方)
          }

          console.log(medicineArray)

          this.excel_json = medicineArray;
          //当我点击确定按钮的时候提交数据
          // this.sendJsonData_to_backend()
          try{
          }catch(err){
            console.log(err)
          }
          this.$refs.upload.value = '';
        } catch (e) {
          return false;
        }
      };
      fileReader.readAsBinaryString(files[0]);
    },

    //将 -----药对，排序个数，excel表json数据传给后端处理
    sendJsonData_to_backend(){
      let that = this
      this.$axios.post('http://localhost:8800/freanalysis', {
        med_num:that.medcineValue,
        sort_num:that.sortValue,
        json:that.excel_json,
      })
          .then(function(response) {
            console.log("-------------")
            // console.log(response.data)
            that.$store.state.frequencyReturnData = response.data;

            console.log(  JSON.parse(JSON.stringify(that.$store.state.frequencyReturnData)))
          }).catch(function(error) {
        console.log("error")
      })
    },
    //下载频次分析数据
    downloadFreq(){
      this.$notify({
        title: '成功',
        message: '这是一条成功的提示消息',
        type: 'success'
      });
    }
  }

}
</script>

<style scoped>
.medicineLabel{
  display: flex;
  text-align: center;
  font-size: medium;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
}
.sortLabel{
  /*display: flex;*/
  /*text-align: center;*/
  font-size: medium;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
}
.fengexian{
  position: relative;
  margin: 15px ;
  width:100%;
  height: 1px;
  background-color: #d4d4d4;
  text-align: center;
  font-size: 16px;
  color: rgba(101, 101, 101, 1);

}
</style>
